<div class="da-login">
  <d-toast [value]="toastMessage" [style]="{ left: '50%',top:'10px' }" [life]="2000" [styleClass]="'custom-class'"></d-toast>
  <div class="da-login-form">
    <div class="da-login-logo-wrapper">
      <span class="da-coperation">{{ 'loginPage.coperation' | translate }}</span>
    </div>
    <div class="da-login-ways">
      <div class="form-card-title">
        <div class="da-register-title">
          <span>登录</span>
        </div>
      </div>
      <form dForm [layout]="horizontalLayout" [labelSize]="'sm'" ngForm (dSubmit)="onClick()">
        <d-form-item>
          <d-form-label>账   号：</d-form-label>
          <d-form-control>
            <div>
              <input
                dTextInput
                autocomplete="off"
                name="userName"
                placeholder="请输入您的账号"
                [(ngModel)]="formData.accountNumber"
                [dValidateRules]="formRules.usernameRules"
              />
            </div>
          </d-form-control>
        </d-form-item>
        <d-form-item>
          <d-form-label>密   码：</d-form-label>
          <d-form-control [suffixTemplate]="suffixTemplate">
            <input
              dTextInput
              name="password"
              [type]="showPassword ? 'text' : 'password'"
              placeholder="请输入您的密码"
              [(ngModel)]="formData.password"
              (keyup)="onKeyUp($event)"
              [dValidateRules]="formRules.passwordRules"
            />
          </d-form-control>
        </d-form-item>
        <div class="da-login-options">
          <div class="da-auto-login">
            <d-toggle [checked]="true" (change)="changeToggle($event)"></d-toggle>
            <span  style="margin-left: 8px">{{ 'loginPage.autoLogin' | translate }}</span>
          </div>
        </div>
        <button class="da-submit-button" dFormSubmit>
          {{ 'loginPage.submit' | translate }}
        </button>
      </form>
    </div>
    <div class="da-other">
      <span class="devui-form-span">{{ 'loginPage.other' | translate }}:</span>
      <span routerLink="/other-login" class="da-other-link" title="二维码登录">
        <i class="icon icon-frame-expand"></i>
      </span>
    </div>
  </div>
  <da-footer [color]="true"></da-footer>
</div>
<ng-template #suffixTemplate>
  <i [class]="showPassword ? 'icon icon-preview' : 'icon icon-preview-forbidden'" (click)="showPassword = !showPassword"></i>
</ng-template>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
